'use strict';

const e = React.createElement;

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    let items = this.props.items.map(item => {
      return e('li', {}, e('label', {}, item.title, ":"), item.value)
    });
    console.log('list items', items)
    return e(
      'ul',
      {},
      ...items
    );
  }
}

class ButtonGroup extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return e('div',null
    ,e('button',{ onClick: () => {var utils = bg.utils; utils.retrieveGameNames() } }, '获取游戏名称')
    ,e('button', { onClick: () => {var utils = bg.utils; utils.retrieveGameUrls() } }, '获取游戏Url')
    ,e('button', { onClick: () => {var utils = bg.utils; utils.checkGameUrls() } }, '查找无效游戏')
    ,e('button', { onClick: () => {var utils = bg.utils; utils.checkGameRedirect() } }, '检查游戏跳转')
    )
  }
}

class Root extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return e('div', {}, e(List, { items: [{ title: '游戏数量', value: gameUrls.length }, { title: '失效数量', value: gameNotWork.length }] }), e(ButtonGroup));
  }
}
/* const item =function (props) {
    return <li><label>{props.title}</label><span>{props.value}</span></li>
}
const data = [{title:'游戏数量',value:1990},{title:'失效数量',value:193}]
const Lists = data.map(value=>{
    item(value)
})*/
const domContainer = document.getElementById('root');
const GAMEURLS = 'gameUrls', GAMENOTWORK = 'gameNotWork'
const gameUrls = JSON.parse(localStorage.getItem(GAMEURLS)) || [];
const gameNotWork = JSON.parse(localStorage.getItem(GAMENOTWORK)) || [];
const bg = chrome.extension.getBackgroundPage();
ReactDOM.render(e(Root), domContainer);
